<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		/* 弹性布局
            display: flex;
            flex-direction属性决定主轴的方向
            flex-direction: row;
            默认情况下，项目都排在一条线（又称"轴线"）上。
            flex-wrap: wrap;
            justify-content属性定义了项目在主轴上的对齐方式。
            justify-content: space-between;
            align-items属性定义项目在交叉轴上如何对齐
            align-items: center; */

		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		.box {
			width: 1226px;
			height: 100px;
			border: 2px solid pink;
			margin: 100px auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		img {
			width: 56px;
			height: 56px;
		}

		ul {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 12px 0 0 30px;
		}

		ul li {
			list-style-type: none;
			padding: 26px 10px 38px;
			font-size: 16px;
		}

		li:hover {
			color: orange;
			cursor: pointer;
		}

		.item2 {
			display: flex;
			justify-content: center;
		}

		.item2 .aa {
			width: 245px;
			height: 50px;
			padding: 0 10px;
		}

		.item2 .bb {
			width: 52px;
			height: 50px;
			padding: 1px 6px;
			background-image: url(./imges/search.png);
			background-position: center;
			background-repeat: no-repeat;
			background-color: #ffffff;
			border: 1px solid #b2b2b2;
		}

		.item2 input.bb:hover {
			background-color: #ff6700;
			cursor: pointer;
		}
	</style>
</head>

<body>
	<div class="box">
		<img src="./imges/logo-mi.png">
		<div class="item1">
			<ul>
				<li>Xiaomi手机</li>
				<li>Redmi手机</li>
				<li>电视</li>
				<li>笔记本</li>
				<li>平板</li>
				<li>家电</li>
				<li>路由器</li>
				<li>服务中心</li>
				<li>社区</li>
			</ul>
		</div>
		<div class="item2">
			<input class="aa" type="search" placeholder="小米手环9">
			<input class="bb" type="submit" value="">
		</div>
	</div>
</body>

</html>